<template>
    <div class="header">
        <div class="left" @click="push('Featured')">
            <div>
                <span>应用市场</span>
            </div>
        </div>
        <div class="center">
            <div class="textBox">
                <div>
                    <span :class="selected == 0 ? 'selected' : ''" @click="push('Featured')">推荐</span>
                </div>
                <div>
                    <span :class="selected == 1 ? 'selected' : ''" @click="push('Apps')">应用</span>
                </div>
                <div>
                    <span :class="selected == 2 ? 'selected' : ''" @click="push('Top')">排行</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="input">
                <el-input @change="search(searchContent)" v-model="searchContent" placeholder="搜索应用/游戏" clearable prefix-icon="el-icon-search">
                </el-input>
            </div>
            <div class="avatar" @click="clickAvatar()">
                <el-avatar :size="32" :src="avatar"></el-avatar>
            </div>
        </div>
    </div>
</template>

<script>
import { getToken } from '@/util/request'
let _this = null
export default {
    name: 'Header',
    props: {
        selected: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            searchContent: '',
            avatar: ''
        }
    },
    created() {
        _this = this
    },
    methods: {
        push: (name) => {
            _this.$router.push('/' + name)
        },
        search: (searchContent) => {
            _this.$router.push({
                name: 'Search',
                params: {
                    content: searchContent
                }
            }, () => {
                location.reload()
            })
        },
        clickAvatar: () => {
            let token = getToken()
            if (token == undefined || token == null || token == '') {
                _this.push('Login')
            } else {
                _this.push('Admin')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.header {
    height: 100%;
    margin: 0;
    border-bottom: 1px solid #f2f2f2;
    display: flex;

    .left {
        width: 15%;
        display: flex;
        flex-direction: column;
        margin: auto;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
    }

    .center {
        width: 60%;
        display: flex;
        text-align: center;

        .textBox {
            padding-left: 30%;
            width: 40%;
            display: flex;
            font-weight: 500;

            div {
                margin: auto;

                .selected {
                    color: #007dff;
                }

                span:hover {
                    color: #007dff;
                    cursor: pointer;
                }
            }
        }
    }

    .right {
        width: 25%;
        display: flex;

        .input {
            width: 60%;
            margin: auto;

            :deep(.el-input__inner) {
                height: 32px;
                border-radius: 18px;
                background-color: #f2f2f2;
                border: none;
            }

            :deep(.el-input__prefix) {
                opacity: 0.9;
                color: #000;
            }

            :deep(.el-input__icon) {
                margin-top: -4px;
                display: block;
            }
        }

        .avatar {
            margin: auto;
            cursor: pointer;
        }
    }
}
</style>